<template>
  <div class="overview base-section">
    <!-- 标题 -->
    <div class="base-section__header">
      <h3 class="base-section__header-title">{{$t('dataAnalysis.pVOverview')}}</h3>
    </div>
    <!-- /标题 -->

    <!-- 轮播 -->
    <div class="scroll-wrapper">
      <div class="scroll-con">
        <div
          v-for="(item, index) in systemTypeName"
          :key="index"
          :class="item.select?'item selected':'item'"
          @click="seleFlowOverview(item.id)"
        >
          <h4 class="item-title">{{item.name}}</h4>
          <div class="item-data">
            <span>{{$t('dataAnalysis.numberOfVisitors')}}</span>
            <span>{{item.userNum}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 轮播 -->

    <!-- 数据展示 -->
    <div class="show-data">
      <div class="data-board">
        <div class="data-board__title visit-title">
          <div>
            <img src="~@/assets/img/visit.png" style="margin-bottom: 8px" />
            <p>{{$t('dataAnalysis.pageBrowsing1')}}</p>
          </div>
        </div>
        <div class="data-board__content visit-content">
          <div class="data-board__content-item">
            <div>{{$t('dataAnalysis.numberOfVisitors')}}</div>
            <div class="num">{{dataArray.userNums}}</div>
            <div class="compare" v-if="timeType!==4">
              {{this.typeName}}
              <span class="arrow">
                <span v-if="ratio.userNumsRatio===0">-</span>
                <span v-if="ratio.userNumsRatio!==0">
                  <span v-if="ratio.userNumsRatioRise===false">↓</span>
                  <span v-if="ratio.userNumsRatioRise===true">↑</span>
                  <span>{{ratio.userNumsRatio + '%'}}</span>
                </span>
              </span>
            </div>
          </div>

          <div class="data-board__content-item" v-if="timeType!==4">
            <div>{{$t('dataAnalysis.newVisitor')}}</div>
            <div class="num">{{dataArray.newUser}}</div>
            <div class="compare">
              {{this.typeName}}
              <span class="arrow">
                <span v-if="ratio.newUserRatio===0">-</span>
                <span v-if="ratio.newUserRatio!==0">
                  <span v-if="ratio.newUserRatioRise===false">↓</span>
                  <span v-if="ratio.newUserRatioRise===true">↑</span>
                  <span>{{ratio.newUserRatio + '%'}}</span>
                </span>
              </span>
            </div>
          </div>

          <div class="data-board__content-item">
            <div>{{$t('dataAnalysis.views')}}</div>
            <div class="num">{{dataArray.visitNums}}</div>
            <div class="compare" v-if="timeType!==4">
              {{this.typeName}}
              <span class="arrow">
                <span v-if="ratio.visitNumsRatio===0">-</span>
                <span v-if="ratio.visitNumsRatio!==0">
                  <span v-if="ratio.visitNumsRatioRise===false">↓</span>
                  <span v-if="ratio.visitNumsRatioRise===true">↑</span>
                  <span>{{ratio.visitNumsRatio + '%'}}</span>
                </span>
              </span>
            </div>
          </div>

          <div class="data-board__content-item" v-if="timeType!==4">
            <div>{{$t('dataAnalysis.stayTime')}}</div>
            <div class="num">{{dataArray.averageStopTime}}</div>
            <div class="compare">
              {{this.typeName}}
              <span class="arrow">
                <span v-if="ratio.averageStopTimeRatio===0">-</span>
                <span v-if="ratio.averageStopTimeRatio!==0">
                  <span v-if="ratio.averageStopTimeRatioRise===false">↓</span>
                  <span v-if="ratio.averageStopTimeRatioRise===true">↑</span>
                  <span>{{ratio.averageStopTimeRatio + '%'}}</span>
                </span>
              </span>
            </div>
          </div>

          <div class="data-board__content-item">
            <div>{{$t('dataAnalysis.perVisits')}}</div>
            <div class="num">{{dataArray.averageVisitNums}}</div>
            <div class="compare" v-if="timeType!==4">
              {{this.typeName}}
              <span class="arrow">
                <span v-if="ratio.averageVisitNumsRatio===0">-</span>
                <span v-if="ratio.averageVisitNumsRatio!==0">
                  <span v-if="ratio.averageVisitNumsRatioRise===false">↓</span>
                  <span v-if="ratio.averageVisitNumsRatioRise===true">↑</span>
                  <span>{{ratio.averageVisitNumsRatio + '%'}}</span>
                </span>
              </span>
            </div>
          </div>

          <div class="data-board__content-item" v-if="timeType!==4">
            <div>{{$t('dataAnalysis.lossRate')}}</div>
            <div class="num">{{dataArray.lossUserRate}}%</div>
            <div class="compare">
              {{this.typeName}}
              <span class="arrow">
                <span v-if="ratio.lossUserRatio===0">-</span>
                <span v-if="ratio.lossUserRatio!==0">
                  <span v-if="ratio.lossUserRatioRise===false">↓</span>
                  <span v-if="ratio.lossUserRatioRise===true">↑</span>
                  <span>{{ratio.lossUserRatio + '%'}}</span>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="data-board">
        <div class="data-board__title deal-title">
          <div>
            <img src="~@/assets/img/deal.png" style="margin-bottom: 8px" />
            <p>{{$t('dataAnalysis.dealTrans')}}</p>
          </div>
        </div>

        <div class="data-board__content deal-content">
          <div class="data-board__content-item">
            <div>{{$t('dataAnalysis.paidNumbers')}}</div>
            <div class="num">{{dataArray.payUser}}</div>
            <div class="compare" v-if="timeType!==4">
              {{this.typeName}}
              <span class="arrow">
                <span v-if="ratio.payUserRatio===0">-</span>
                <span v-if="ratio.payUserRatio!==0">
                  <span v-if="ratio.payUserRatioRise===false">↓</span>
                  <span v-if="ratio.payUserRatioRise===true">↑</span>
                  <span>{{ratio.payUserRatio + '%'}}</span>
                </span>
              </span>
            </div>
          </div>
          <div class="data-board__content-item" v-if="timeType!==4">
            <div>{{$t('dataAnalysis.vToP')}}</div>
            <div class="num">{{dataArray.payRate}}%</div>
            <div class="compare">
              {{this.typeName}}
              <span class="arrow">
                <span v-if="ratio.payRateRatio===0">-</span>
                <span v-if="ratio.payRateRatio!==0">
                  <span v-if="ratio.payRateRatioRise===false">↓</span>
                  <span v-if="ratio.payRateRatioRise===true">↑</span>
                  <span>{{ratio.payRateRatio + '%'}}</span>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 数据展示 -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      systemTypeName: [
        { name: this.$i18n.t('date.a'), id: 0, userNum: 0, select: true },
        { name: 'PC', id: 1, userNum: 0, select: false },
        { name: 'H5', id: 2, userNum: 0, select: false },
        { name: this.$i18n.t('sysManagement.miniPrograms'), id: 3, userNum: 0, select: false },
        { name: this.$i18n.t('dataAnalysis.android'), id: 4, userNum: 0, select: false },
        { name: 'IOS', id: 5, userNum: 0, select: false }
      ],
      dataArray: {
        userNums: 0,
        newUser: 0,
        visitNums: 0,
        averageStopTime: 0,
        averageVisitNums: 0,
        lossUserRate: '0.00%',
        payUser: 0,
        payRate: '0.00%'
      },
      ratio: {
        averageStopTimeRatio: 0,
        averageStopTimeRatioRise: true,
        averageVisitNumsRatio: 0,
        averageVisitNumsRatioRise: true,
        lossUserRatio: 0,
        lossUserRatioRise: true,
        newUserRatio: 0,
        newUserRatioRise: true,
        payRateRatio: 0,
        payRateRatioRise: true,
        payUserRatio: 0,
        payUserRatioRise: true,
        userNumsRatio: 0,
        userNumsRatioRise: true,
        visitNumsRatio: 0,
        visitNumsRatioRise: true
      },
      systemType: 0, // 系统类型
      userNumsArray: [], // 流量总览访客数列表
      timeType: this.$parent.timeType,
      startTime: this.$parent.startTime,
      typeName: this.$i18n.t('dataAnalysis.compareWithThePreviousOneDay')
    }
  },
  mounted () {
    this.getAnalysisData()
  },
  watch: {
    startTime (val) {
      this.getAnalysisData()
    },
    systemType (val) {
      this.systemType = val
      this.getAnalysisData()
    }
  },
  methods: {
    // 通过当前时间类别更新比较日期
    updateTimeName () {
      switch (this.timeType) {
        case 1:
          this.typeName = this.$i18n.t('dataAnalysis.compareWithThePreviousOneDay')
          break
        case 2:
          this.typeName = this.$i18n.t('dataAnalysis.aWeekCompare')
          break
        case 3:
          this.typeName = this.$i18n.t('dataAnalysis.compareWithThePreviousAMonth')
          break
        case 4:
          this.typeName = ''
          break
        case 5:
          this.typeName = this.$i18n.t('dataAnalysis.compareWithThePrevious7Days')
          break
        case 6:
          this.typeName = this.$i18n.t('dataAnalysis.compareWithThePrevious30Days')
          break
        default:
          break
      }
    },
    // 请求接口
    getAnalysisData () {
      // console.log('第一部分发送请求')
      // 请求第一部分数据
      this.$http({
        url: this.$http.adornUrl('/platform/flowAnalysis/getAnalysisData'),
        method: 'get',
        params: this.$http.adornParams({
          timeType: this.timeType,
          start: !this.startTime ? null : this.startTime,
          systemType: this.systemType
        })
      }).then(({ data }) => {
        if (data) {
          this.dataArray = data
          this.ratio = data.ratio
        }
      })

      // 请求第一部分所有系统的访客数
      this.$http({
        url: this.$http.adornUrl('/platform/flowAnalysis/systemTypeNums'),
        method: 'get',
        params: this.$http.adornParams({
          timeType: this.timeType,
          start: !this.startTime ? null : this.startTime
        })
      }).then(({ data }) => {
        if (data) {
          for (let i = 0; i < this.systemTypeName.length; i++) {
            if (i === 0) {
              this.systemTypeName[i].userNum = data.all
            } else if (i === 1) {
              this.systemTypeName[i].userNum = data.pc
            } else if (i === 2) {
              this.systemTypeName[i].userNum = data.h5
            } else if (i === 3) {
              this.systemTypeName[i].userNum = data.applets
            } else if (i === 4) {
              this.systemTypeName[i].userNum = data.android
            } else if (i === 5) {
              this.systemTypeName[i].userNum = data.ios
            }
            if (this.systemType === i) {
              this.systemTypeName[i].select = true
            } else {
              this.systemTypeName[i].select = false
            }
          }
        }
      })
    },
    // 流量总览点击切换
    seleFlowOverview (systemType) {
      this.systemType = systemType
      this.$parent.systemType = systemType
      this.getAnalysisData()
      // for (let i = 0; i<ele.length; i++) {
      //   var systemTypeName = this.systemTypeName[i]
      //   if (systemType === i) {
      //     this.$set(this.systemTypeName, '')
      //     this.systemTypeName.select = true
      //   } else {
      //     this.systemTypeName.select = false
      //   }
      // }
    }
  }
}
</script>

<style lang="scss">
.overview {
  /* 轮播 */
  .scroll-con {
    padding: 10px 0;
    white-space: nowrap;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: -10px 0;
    flex-wrap: wrap;
  }

  .scroll-con .item {
    height: 92px;
    min-width: 200px;
    max-width: 240px;
    border: 1px solid #dcdee0;
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
    -ms-flex: 1 1 200px;
    flex: 1 1 200px;
    cursor: pointer;
    transition: box-shadow 0.2s ease 0s;
    margin: 8px 8px;
  }

  .scroll-con .item:hover {
    box-shadow: 0 2px 8px rgba(200, 201, 204, 0.5);
  }

  .scroll-con .selected {
    background-color: #edf4ff;
    border-color: #155bd4;
  }

  .item-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
  }

  .item-data {
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 16px;
  }

  /* 轮播 */

  /* 数据展示 */
  .show-data {
    margin-top: 24px;
  }

  .show-data .data-board {
    display: flex;
    margin-bottom: 4px;
  }

  .data-board .data-board__title {
    padding: 0 12px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    -ms-flex: none;
    flex: none;
  }

  .data-board .visit-title {
    background-color: #02a1e9;
  }

  .data-board .deal-title {
    background-color: #66cc99;
  }

  .data-board .data-board__content {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    padding: 0 8px;
  }

  .data-board .visit-content {
    background-color: rgb(243, 247, 253);
  }

  .data-board .deal-content {
    background-color: rgb(240, 248, 240);
  }

  .data-board__content-item {
    min-width: 200px;
    width: 25%;
    padding: 24px;
  }

  .data-board__content-item .num {
    line-height: 28px;
    font-size: 20px;
    font-weight: 500;
    margin-top: 8px;
  }

  .data-board__content-item .compare {
    color: #969799;
    margin-top: 8px;
  }

  .data-board__content-item .arrow {
    color: #323233;
    margin-left: 16px;
  }

  /* 数据展示 */
}
</style>

